import { useState } from "react";
import ProForm, { ProFormText } from "@ant-design/pro-form";
import { filterRasCode } from "@/const";
import { DeleteOutlined } from "@ant-design/icons";
import { Button, List, Input } from "antd";
export default ({ quantity, value, onChange }) => {
  const [rasCodeList, setRasCodeList] = useState([]);
  const setArr = (e) => {
    const rasCode = filterRasCode(e.target.value);
    const arr = [...new Set([...rasCodeList, rasCode])].filter(Boolean);
    if (arr.length <= quantity) {
      setRasCodeList(arr);
      onChange(arr);
    }else {
      message.warning(`最多添加${quantity}本书`);
    }
  };
  return (
    <>
      <Input
        placeholder="扫码/感应芯片添加"
        onBlur={setArr}
        onPressEnter={setArr}
      />
      <List
        style={{ width: 300 }}
        itemLayout="horizontal"
        dataSource={rasCodeList}
        renderItem={(item) => (
          <List.Item
            actions={[
              <DeleteOutlined
                style={{ fontSize: 20, color: "red", cursor: "pointer" }}
                onClick={() => {
                  const arr = rasCodeList.filter((i) => i !== item);
                  setRasCodeList(arr);
                  onChange(arr);
                }}
              />,
            ]}
          >
            <List.Item.Meta title={item} />
          </List.Item>
        )}
      />
    </>
  );
};
